import React from 'react';
import { Toolbar } from '@antv/graphin-components';
import { DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';

const RzToolBar = () => {
  const options = [
    {
      key: 'zoomOut',
      name: <ZoomInOutlined />,
    },
    {
      key: 'zoomIn',
      name: <ZoomOutOutlined />,
    },
    {
      key: 'autoZoom',
      name: <DragOutlined />,
    },
  ];

  const handleClick = (graphinContext: any, config: any) => {
    const { apis } = graphinContext;
    const { handleZoomIn, handleZoomOut, handleAutoZoom } = apis;
    if (config.key === 'zoomIn') {
      handleZoomIn();
    } else if (config.key === 'zoomOut') {
      handleZoomOut();
    } else if (config.key === 'autoZoom') {
      handleAutoZoom();
    }
  };

  return <Toolbar options={options} onChange={handleClick} direction="vertical" />;
};

export default RzToolBar;
